import React, { Component } from 'react'

 class App extends Component {
   
    // 在react里this指向当前组件得实例
    state = {    // 以后写变量就这么写
        name:"zhangsan",
        arr:[
            {
                tit:"标题1",
                con:"内容1"
            },
            {
                tit:"标题2",
                con:"内容2"
            },
            {
                tit:"标题3",
                con:"内容3"
            }
        ]
    }
    //  constructor(props){ // 类的构造器
    //      super(props) // super表示继承 Component.call(this)
    //     // 让当前组件具有了react得特性
    //     this.state = {
    //         name:"zhamngsan"
    //     }
    //  }
    // 在react里渲染使用jsx语法，jsx语法就是html和js得混写
    render() {
    return ( //这里必须写一个小括号，小括号表示可以渲染得原生可以换行
        // jsx 遇到尖角号解析html，遇到花括号解析js
        <div className='app-wrap'>
          <span>1</span>
          <p>2</p>
          <p>{this.state.name}</p>
           <button onClick={()=>{
               this.setState({
                   name:"lisi"
               })
           }}>点击修改name得值</button>
           {
              this.state.arr&&this.state.arr.length? this.state.arr.map((item,index)=>{
                   return <div key={index}>{item.tit}</div>
               }):"暂无数据"
           }
           
        </div>
    
    )
  }
}
// new App()
export default App